<template>
    <vBreadcrumbVue></vBreadcrumbVue>
    <div>
        <a-row :gutter="[8, 16]">
            <a-col :span="24">
                <a-card :bordered="false">
                    <a-form :scrollToFirstError="true" @finish="onFinish">
                        <a-row :gutter="24" :wrap="true">
                            <a-col :span="6">
                                <a-form-item label="仓库名">
                                    <a-input class="flex-1" v-model:value="formState.name" placeholder="请输入仓库名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="仓库域名">
                                    <a-input class="flex-1" v-model:value="formState.website" placeholder="请输入仓库域名" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item :name="['user', 'manager']" label="仓库管理员">
                                    <a-input class="flex-1" v-model:value="formState.manager" placeholder="请输入仓库管理员" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item :name="['user', 'sprName']" label="审批人">
                                    <a-select v-model:value="formState.sprName">
                                        <a-select-option value="hongjun">红军</a-select-option>
                                        <a-select-option value="lilei">李磊</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :justify="'end'">
                            <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
                        </a-row>
                    </a-form>
                </a-card>
            </a-col>
            <a-col :span="24">
                <a-card :title="'查询表格'" :bordered="false">
                    <template #extra>
                        <a-space>
                            <a-button type="primary">新建</a-button>
                            <a-switch v-model:checked="checked" checked-children="开" un-checked-children="关" />
                            <a-divider type="vertical" />
                            <a-popover v-model:visible="visible" placement="bottom" trigger="click">
                                <template #title>
                                    <a-checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                                        @change="onCheckAllChange">
                                        列展示 / 排序
                                    </a-checkbox>
                                    <a>重置</a>
                                </template>
                                <template #content>
                                    <div class="checklist">
                                        <a-checkbox-group v-model:value="state.checkedList">
                                            <a-row :wrap="true">
                                                <a-col :span="24" v-for="(item, index) in plainOptions">
                                                    <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                                                </a-col>
                                            </a-row>
                                        </a-checkbox-group>
                                    </div>
                                </template>
                                <a-tooltip>
                                    <template #title>列表设置</template>
                                    <icon>
                                        <template #component>
                                            <svg focusable="false" class="" data-icon="setting" width="1em" height="1em"
                                                fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                                                <path
                                                    d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z">
                                                </path>
                                            </svg>
                                        </template>
                                    </icon>
                                </a-tooltip>
                            </a-popover>
                            <a-divider type="vertical" />
                            <a-tooltip>
                                    <template #title>全屏</template>
                                    <fullscreen-outlined />
                                </a-tooltip>
                        </a-space>
                    </template>
                    <a-table :pagination="true" :dataSource="list" :columns="columns">
                        <template v-if="columns.length > 0" v-slot:bodyCell="{ text, record, index, column }">
                            <template v-if="column.dataIndex == 'editor'">
                                <a>编辑</a>
                            </template>
                        </template>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref, toRaw, watch } from 'vue';
import Icon, { FullscreenOutlined } from '@ant-design/icons-vue';
import { post } from '@/services/api/request';
const formState = reactive({
    website: '',
    name: '',
    manager: '',
    sprName: '',
    time: [],
    cktype: ''
});
const checkedList = ref<string[]>(['id', 'ruleName', 'describe', 'serviceNum', 'state', 'lasetime', 'editor']);
const state = reactive({
    indeterminate: false,
    checkAll: true,
    checkedList: checkedList.value,
});

const checked = ref<boolean>(false);
const visible = ref<boolean>(false);
const columns = ref([
    {
        title: '序号',
        dataIndex: 'id',
        width: 100
    },
    {
        title: '规则名称',
        dataIndex: 'ruleName',
        width: 150
    },
    {
        title: '描述',
        dataIndex: 'describe',
        width: 250
    },
    {
        title: '服务调用次数',
        dataIndex: 'serviceNum',
    }, {
        title: '状态',
        dataIndex: 'state',
    }, {
        title: '上次调度时间',
        dataIndex: 'lasetime',
    }, {
        title: '操作',
        dataIndex: 'editor',
    },
])
const plainOptions = ref([
    {
        title: '序号',
        dataIndex: 'id',
        width: 100
    },
    {
        title: '规则名称',
        dataIndex: 'ruleName',
        width: 150
    },
    {
        title: '描述',
        dataIndex: 'describe',
        width: 250
    },
    {
        title: '服务调用次数',
        dataIndex: 'serviceNum',
    }, {
        title: '状态',
        dataIndex: 'state',
    }, {
        title: '上次调度时间',
        dataIndex: 'lasetime',
    }, {
        title: '操作',
        dataIndex: 'editor',
    },
])

const onCheckAllChange = (e: any) => {
    Object.assign(state, {
        checkedList: e.target.checked ? checkedList.value : [],
        indeterminate: false,
    })
}
const list = ref([])

post("tablelist", '', '').then(data => {
    list.value = data.page.list
})


watch(() => state.checkedList, (val, predata) => {
    console.log(typeof val)
    columns.value = plainOptions.value.filter((value, index) => {
        if (val.includes(value.dataIndex)) {
            return value
        }
    })
    state.indeterminate = !!val.length && val.length < plainOptions.value.length;
    state.checkAll = val.length === plainOptions.value.length;
})
const onSubmit = () => {

};
const onFinish = (values: any) => {
    console.log('Success:', values);
};
</script>
<script lang="ts" >
export default {
    name: 'table-list'
}
</script>

<style lang="less" scoped>
.checklist {
    width: 200px;
}
</style>